import styles from './index.module.less'
import Button from '@/components/button'
import cm from 'classnames'
import { useEffect } from 'react'
import Copy from 'clipboard'
import Toast from '@/components/toast'
import { handleLocalUserInfo } from '@/utils/utils'
import { useNavigate } from 'react-router-dom'
const qaArr = [
  {
    title: '我的推广链接是否只适用于网页？',
    desc: '为确保你的推广效果，我们接入了专业联盟追踪工具，记录了从你的推广链接所来的用户，用户无论是从你的链接中注册、前往官网使用或是下载应用都能准确地记录在你的推广记录中。',
  },
  {
    title: '我能多久收到分成？',
    desc: '用户一旦付款后，后台将立刻将分成信息计入你的账户，为确认用户不是恶意刷单或有退款行为，我们会对每个订单进行7-30天的审核冻结期，随后就可以将账户的金额随时提现，单次提现金额最小为100元（放心你可以轻松达到）。',
  },
  // {
  //   title: '激活码是否有使用期限？',
  //   desc: '激活码一旦购买之后随时可用，没有使用期限，并且激活码的会员时长会在用户激活后才会开始计时。'
  // },
  // {
  //   title: '激活码只能绑定单设备吗？',
  //   desc: '为减少您的售后难度，我们将激活码设置为绑定用户账号，用户一旦针对账号激活后，将可以在TV/手机/网页多端使用（这也可以作为您售卖时的权益之一）'
  // },
  // {
  //   title: '激活码能通过哪些方式激活？',
  //   desc: '激活码有两种激活方式，一种是直接将激活码发送给用户，用户直接在安装星视界后应用或在网页上输入激活码即可激活账号。另一种方式，可以通过后台配置，直接帮助用户远程激活设备，激活设备的权益会自动绑定至用户首次登录的账号。'
  // }
]

const CONTRACT_ARR = [
  {
    icon: '/images/c1.png',
    text: 'starshipco',
    key: 'Telegram',
  },
  {
    icon: '/images/c2.png',
    text: '+852 5625 7945',
    key: 'Whatsapp',
  },
  {
    icon: '/images/c3.png',
    text: 'starshipco',
    key: 'Wechat',
  },
]

const Index = () => {
  const navigate = useNavigate()
  const { getUserToken } = handleLocalUserInfo()

  useEffect(() => {
    const copyObj = {}
    CONTRACT_ARR.forEach((item) => {
      copyObj[item.key] = new Copy(`.${item.key}`)
      copyObj[item.key].on('success', () => {
        Toast.normal('已成功复制到剪切板')
      })
    })
    return () => {
      CONTRACT_ARR.forEach((item) => {
        copyObj[item.key].destroy()
      })
    }
  }, [])

  return (
    <div className={styles.main}>
      <div className={styles.head}>
        <div className="flex items-center">
          <img src="/images/histar-logo.webp" alt="" className={styles.logo} />
          <a className={styles.navAthor} href="#howtodo">
            如何运作
          </a>
          <a className={styles.navAthor} href="#question">
            常见问题
          </a>
          <a className={styles.navAthor} href="#contract">
            联系我们
          </a>
        </div>
        <div className="flex items-center">
          {getUserToken().token ? (
            <Button className={styles.btn} onClick={() => navigate('/market-center')}>
              打开控制台
            </Button>
          ) : (
            <>
              <Button className={styles.btn} onClick={() => navigate('/login?to=1')}>
                登录
              </Button>
              <Button className={styles.btn} onClick={() => navigate('/login?to=2')}>
                立即加入
              </Button>
            </>
          )}
        </div>
      </div>
      <div className={styles.content}>
        <div className={styles.step1}>
          <img src="/images/step1-title.webp" alt="" className={styles.step1Img} />
          <p className={styles.step1Text}>
            星视界包含全网影视资源、IPTV直播及体育赛事，支持TV、网页、手机设备使用，一个应用满足华语用户观看内容及场景，加入营销计划轻松挣钱。
          </p>
          <div className={styles.btnGroup}>
            {getUserToken().token ? (
              <Button className={styles.btn} onClick={() => navigate('/market-center')}>
                打开控制台
              </Button>
            ) : (
              <>
                <Button className={styles.btn} onClick={() => navigate('/login?to=1')}>
                  登录
                </Button>
                <Button className={cm(styles.btn, styles.btnJoin)} onClick={() => navigate('/login?to=2')}>
                  立即加入
                </Button>
              </>
            )}
          </div>
        </div>
        <div className={styles.step2} id="howtodo">
          <div className={styles.howto}>如何运作</div>
          <p className={styles.howtoText}>
            营销计划支持多种分成模式，不管你是互联网流量主、硬件生产还是网店店主都能找到合适的的合作模式
          </p>
          <img src="/images/step3.webp" className={styles.img} />
        </div>
        <div className={styles.step3} id="question">
          <div className={styles.howto}>常见问题</div>
          <div className={styles.qaBox}>
            {qaArr.map((item, index) => {
              return (
                <div className={styles.qaItem} key={index}>
                  <img src="/images/qa.png" className={styles.img} alt="" />
                  <div className={styles.qaRight}>
                    <div className={styles.qaTitle}>{item.title}</div>
                    <div className={styles.qaDesc}>{item.desc}</div>
                  </div>
                </div>
              )
            })}
          </div>
        </div>
        <div className={styles.step4} id="contract">
          <div className={styles.callus}>联系我们</div>
          <div className={styles.callTips}>
            营销计划支持多种分成模式，不管你是互联网流量主、硬件生产还是网店店主都能找到合适的的合作模式
          </div>
          <div className={styles.callGroup}>
            {CONTRACT_ARR.map((item, index) => {
              return (
                <div className={cm(styles.contactBox, item.key)} key={index} data-clipboard-text={item.text}>
                  <img src={item.icon} className={styles.normal} alt="" />
                  <span>
                    {item.key}：{item.text}
                  </span>
                </div>
              )
            })}
          </div>
        </div>
      </div>
    </div>
  )
}
export default Index
